<template>
  <TableView
    ref="tableView"
    :table-attrs="{ api: fetchList }"
    form-path="/asset/fyassetsau/sauForm/{id:-1}"
    :search-model="searchForm"
    :tree-listeners="{ 'node-click': onNodeClick }"
    :tree-attrs="{
      fetchApi: fetchCtiTree,
      show: true,
      treeProps: { label: 'name' },
      lazy: false,
      'expand-first-node': true,
      customRootNode: { name: '全部', id: -1 }
    }"
    :toolbar-attrs="{
      buttons: ['slot', { del: permissions.sau_fyassetsau_del, create: permissions.sau_fyassetsau_add }]
    }"
    :delete-api="batchDelete">
    <template #toolbar-button>
      <ToolbarButton
        v-if="permissions.sau_fyassetsau_export"
        type="primary"
        icon="el-icon-download"
        label="导出"
        @click="exportExcel()" />
      <ToolbarButton
        v-if="permissions.sau_fyassetsau_export"
        type="primary"
        icon="el-icon-upload"
        label="导入"
        @click="$refs.excelUpload.show()" />
    </template>
    <template #columns>
      <TableColumn label="资产分类全名称" prop="classified" clickable />
      <TableColumn label="条形码" prop="barcode" clickable />
      <TableColumn label="资产名称" prop="name" clickable />
      <TableColumn label="规格型号" prop="model" clickable />
      <TableColumn label="金额" prop="amount" clickable />
      <TableColumn label="计量单位" prop="unit" clickable />
    </template>
    <template #search-form>
      <FormInput v-model="searchForm.name" label="资产名称" prop="name" />
      <FormInput v-model="searchForm.model" label="规格型号" prop="model" />
      <FormInput v-model="searchForm.unit" label="计量单位" prop="type" />
    </template>
    <!--excel 模板导入 -->
    <ExcelUpload
      ref="excelUpload"
      title="资产型号导入"
      :url="`${assetService}fyassetsau/import`"
      :temp-url="`${assetService}fyassetsau/local/sauTemp.xlsx`"
      temp-name="资产型号导入模板.xlsx"
      @refreshDataList="refreshChange" />
  </TableView>
</template>

<script>
  import { mapState } from 'vuex'
  import { services } from '@/config'
  import { fetchList, batchDelete } from '@/api/asset/fyassetsau'

  import { fetchCtiTree } from '@/api/asset/fyassetcti'

  export default {
    name: 'SauTreeView',

    data() {
      return {
        searchForm: {
          ctiId: null,
          name: '',
          model: '',
          classifiedCode: '',
          unit: ''
        },
        assetService: services.assetService
      }
    },
    computed: {
      ...mapState('user', ['permissions'])
    },
    methods: {
      fetchList,
      fetchCtiTree,
      batchDelete,
      refreshChange() {
        this.$refs.tableView.onSearchClick()
      },
      onNodeClick(node) {
        this.searchForm.classifiedCode = node.fullCode
        this.$refs.tableView.onSearchClick()
      },
      //  导出excel
      exportExcel() {
        this.$downBlobFile(
          `${services.assetService}fyassetsau/export`,
          this.searchForm,
          `标准资产型号管理${this.$dateFormat(new Date())}.xlsx`
        )
      }
    }
  }
</script>
